<template>
    <div class="orderDetele">
        <Loading :loading="loading">
            <Form :label-width="150" :model="formOrderData" inline>
                <h3 class="title">订单信息</h3>
                <FormItem label="子订单号：" style="width:32%">
                    <div>{{ formOrderData.subOrderId }}</div>
                </FormItem>
                <FormItem label="主订单号：" style="width:32%">
                    <div>{{ formOrderData.orderId }}</div>
                </FormItem>
                <FormItem label="商品订单下单时间：" style="width:32%">
                    <div>{{ formOrderData.createdDt }}</div>
                </FormItem>
                <FormItem label="通道费率：" style="width:32%">
                    <div>{{ formOrderData.rate ? `${formOrderData.rate}%` : '' }}</div>
                </FormItem>
                <FormItem label="支付订单：" style="width:32%">
                    <div>{{ formOrderData.paymentId }}</div>
                </FormItem>
                <FormItem label="支付流水：" style="width:32%">
                    <div>{{ formOrderData.order ? formOrderData.order.flowId : '' }}</div>
                </FormItem>
                <FormItem label="支付订单创建时间：" style="width:32%">
                    <div>{{ formOrderData.payCreateTime }}</div>
                </FormItem>
                <FormItem label="支付订单交易时间：" style="width:32%">
                    <div>{{ formOrderData.payTime }}</div>
                </FormItem>
                <FormItem label="商品名称：" style="width:32%">
                    <div>{{ formOrderData.productName }}</div>
                </FormItem>
                <FormItem label="产品编码：" style="width:32%">
                   <div>{{ formOrderData.productCode }}</div>
                </FormItem>
                <FormItem label="商品类型：" style="width:32%">
                    <div>{{ formOrderData.orderSource }}</div>
                </FormItem>
                <FormItem label="支付渠道：" style="width:32%">
                    <div>{{ formOrderData.payChannel }}</div>
                </FormItem>
                <FormItem label="订单金额：" style="width:32%">
                    <div>{{ formOrderData.orderAmount ? `${formOrderData.orderAmount / 100}元` : '' }}</div>
                </FormItem>
                <FormItem label="实付金额：" style="width:32%">
                    <div>{{ formOrderData.payAmount ? `${formOrderData.payAmount / 100}元` : '' }}</div>
                </FormItem>
                <FormItem label="是否优惠：" style="width:32%">
                    <div>{{ formOrderData.isCoupon ? '是' : '否' }}</div>
                </FormItem>
                <FormItem label="支付方式：" style="width:32%">
                    <div>{{ formOrderData.payWay }}</div>
                </FormItem>

                <div v-for="(i, ind) in formOrderData.coupons" :key="ind">
                    <FormItem :label="`优惠券${ind+1}`" style="width:32%">
                        <div>{{ i.couponName }}</div>
                    </FormItem>
                    <FormItem label="优惠券编码：" style="width:32%">
                        <div>{{ i.couponCode }}</div>
                    </FormItem>
                    <FormItem label="优惠金额：" style="width:32%">
                        <div>{{ i.discount ? `${i.discount / 100}元` : '0' }}</div>
                    </FormItem>
                </div>
            </Form>

            <Form :label-width="150" :model="formMerchData" inline>
                <h3>商户信息</h3>
                <div class="childerList">
                    <FormItem label="商户名称" style="width:32%">
                        <div>{{ formMerchData.merchantName }}</div>
                    </FormItem>
                    <FormItem label="商户编码：" style="width:32%">
                        <div>{{ formMerchData.merchantCode }}</div>
                    </FormItem>
                    <FormItem label="组织机构：" style="width:32%">
                        <div>{{ formMerchData.organizationName }}</div>
                    </FormItem>
                    <FormItem label="机构编码：" style="width:32%">
                        <div>{{ formMerchData.organizationCode }}</div>
                    </FormItem>
                    <FormItem label="开户行：" style="width:32%">
                        <div>{{ formMerchData.openingBank }}</div>
                    </FormItem>
                    <FormItem label="账户结算类型：" style="width:32%">
                        <div>{{ formMerchData.accountTypeName }}</div>
                    </FormItem>
                    <FormItem label="银行账号：" style="width:32%">
                        <div>{{ formMerchData.accountNo }}</div>
                    </FormItem>
                    <FormItem label="合同有效期：" style="width:32%">
                        <div>{{ formMerchData.contractStartDate }} -- {{ formMerchData.contractStartDate }}</div>
                    </FormItem>
                </div>
            </Form>

            <Form :label-width="150" :model="formRuleData" inline>
                <h3>清分信息</h3>
                <div class="childerList">
                    <FormItem label="清分规则名称：" style="width:32%">
                        <div>{{ formRuleData.ruleName }}</div>
                    </FormItem>
                    <FormItem label="规则类型：" style="width:32%">
                        <div>{{ formRuleData.ruleTypeCn }}</div>
                    </FormItem>
                    <FormItem label="结算类型：" style="width:32%">
                        <div>{{ formRuleData.settlementTypeCn }}</div>
                    </FormItem>
                    <FormItem label="规则编码：" style="width:32%">
                        <div>{{ formRuleData.ruleCode }}</div>
                    </FormItem>
                    <FormItem label="产品单价：" style="width:32%">
                        <div>{{ formRuleData.productPrice ? `${formRuleData.productPrice}元` : '' }}</div>
                    </FormItem>
                    <FormItem label="平台应收：" style="width:32%">
                        <div>{{ formRuleData.clearingRule == 1 ? `${formRuleData.platformReceivable}%` : formRuleData.clearingRule == 2 ? `${formRuleData.platformReceivable}元` : '' }}</div>
                    </FormItem>
                    <FormItem label="商户应收：" style="width:32%">
                       <div>{{ formRuleData.clearingRule == 1 ? `${formRuleData.merchantReceivable}%` : formRuleData.clearingRule == 2 ? `${formRuleData.merchantReceivable}元` : '' }}</div>
                    </FormItem>
                    <FormItem label="规则优先级：" style="width:32%">
                        <div>{{ formRuleData.priorityLevel }}</div>
                    </FormItem>
                    <FormItem label="规则生效日期：" style="width:32%">
                        <div>{{ formRuleData.effectiveDate }}</div>
                    </FormItem>
                    <FormItem label="规则失效日期：" style="width:32%">
                        <div>{{ formRuleData.expireDate }}</div>
                    </FormItem>
                    <FormItem label="清分周期：" style="width:32%">
                        <div v-if="formRuleData.clearingCycleMode === '1'">T + {{ formRuleData.clearingCycleValue }}</div>
                        <div v-if="formRuleData.clearingCycleMode === '2'">{{ formRuleData.clearingCycleValue }}日/{{ formRuleData.clearingCycleValueExt }}个月</div>
                    </FormItem>
                    <FormItem label="订单核销日期：" style="width:32%">
                        <div>{{ formRuleData.verifiedTime }}</div>
                    </FormItem>
                    <FormItem label="应清算日期：" style="width:32%">
                        <div>{{ formRuleData.shouldClearDate }}</div>
                    </FormItem>
                </div>
            </Form>

                <h3>平台清分信息</h3>
                <br>
                <Table class="tableBox" border :columns="columns" :data="formBillResuleData"></Table>
                <br>
                <h3>银行清分流水</h3>
                <br>
                <Table class="tableBox" border :columns="columnsBank" :data="formBankBillData"></Table>
                <br>
            <AbnormalCause
                :differenceList="differenceList"
                @submit="submitFun"
            ></AbnormalCause>
        </Loading>
    </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../Module/clearingAbnormalModule";
import { Form, FormItem, Message, Table, Modal } from "view-design";
import Loading from "@/components/Loading";
import AbnormalCause from "@/components/AbnormalCause";
import Authc from "@/components/Authc";
export default {
    name: "clearingAbnormaRemarklForm",
    components: {
        Table,
        Loading,
        Form,
        FormItem,
        Message,
        Modal,
        Authc,
        AbnormalCause
    },
    props: ["id"],
    data() {
        return {
            formData: {}, // 订单信息
            formChilderData: [], // 子订单信息
            formRefundsData: {}, // 退款信息
            formCouponsDtat: [], // 优惠劵
            differenceList: [] /** 差异原因 **/,
            columns: [
                {
                    title: "费用类型",
                    align: "center",
                    key: "costTypeCn",
                    minWidth: 100
                },
                {
                    title: "应清分日期",
                    align: "center",
                    key: "shouldClearDate",
                    minWidth: 180
                },
                {
                    title: "商户号",
                    align: "center",
                    key: "merchantCode",
                    minWidth: 180
                },
                {
                    title: "清分金额(元)",
                    align: "center",
                    key: "clearAmount",
                    minWidth: 120,
                    render: (h, params) => {
                        return h('span', params.row.clearAmount / 100)
                    },
                },
                {
                    title: "付款账号",
                    align: "center",
                    key: "payAcct",
                    minWidth: 180
                },
                {
                    title: "付款账户名",
                    align: "center",
                    key: "payAcctName",
                    minWidth: 200
                },
                {
                    title: "收款账号",
                    align: "center",
                    key: "colAcct",
                    minWidth: 180
                },
                {
                    title: "收款账户名",
                    align: "center",
                    key: "colAcctName",
                    minWidth: 220
                },
                {
                    title: "状态",
                    align: "center",
                    key: "billStatusCn",
                    minWidth: 100
                }
            ],
            columnsBank: [
                {
                    title: "清分批次号",
                    align: "center",
                    key: "clearBatchNo",
                    minWidth: 180
                },
                {
                    title: "招行订单号",
                    align: "center",
                    key: "bankOrderId",
                    minWidth: 230
                },
                {
                    title: "外部订单号",
                    align: "center",
                    key: "orderId",
                    minWidth: 180
                },
                {
                    title: "子订单号",
                    align: "center",
                    key: "subOrderId",
                    minWidth: 190
                },
                {
                    title: "商户号",
                    align: "center",
                    key: "subMchId",
                    minWidth: 160
                },
                {
                    title: "付款账户名",
                    align: "center",
                    key: "payAcctName",
                    minWidth: 200
                },
                {
                    title: "付款账号",
                    align: "center",
                    key: "payAcct",
                    minWidth: 180
                },
                {
                    title: "收款账户名",
                    align: "center",
                    key: "colAcctName",
                    minWidth: 200
                },
                {
                    title: "收款账号",
                    align: "center",
                    key: "colAcct",
                    minWidth: 180
                },
                {
                    title: "清分金额(元)",
                    align: "center",
                    key: "clearAmount",
                    minWidth: 120,
                    render: (h, params) => {
                        return h('span', params.row.clearAmount / 100)
                    },
                },
                {
                    title: "核销时间",
                    align: "center",
                    key: "verifiedTime",
                    minWidth: 120
                },
                {
                    title: "状态",
                    align: "center",
                    key: "billStatusCn",
                    minWidth: 100
                }
            ],
            tableData: [], /** 平台清分list */
            bankData: [], /** 银行清分list */
            disabled: false,

            formOrderData: {}, // 订单信息
            formMerchData: {}, // 商户信息
            formRuleData: {}, // 清分信息
            formBillResuleData: [], //平台清分流水
            formBankBillData: [] // 银行清分流水
        };
    },
    created() {
        console.log(this.$route.query.abnormalType, '3333333333333333333')
        this.getDetails();
        this.getDiffCauseList();
    },
    methods: {
        /** 获取详情 **/
        async getDetails() {
            try {
                let id = this.$route.query.id;
                let res = await this.$store.dispatch(`${namespace}/getDetail`, id);
                let data = res.data;
                this.formOrderData = data.orderRes || {};
                this.formMerchData = data.merchantRes || {};
                this.formRuleData = data.settlementRuleRes || {};
                this.formBillResuleData = data.platformBillRes || {};
                this.formBankBillData = data.bankBillRes || [];
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        },
        /** 获取差异原因 **/
        async getDiffCauseList() {
            try {
                let obj = {
                    module: "settlement_diff_config"
                };
                let res = await this.$store.dispatch(`${namespace}/getDiffCauseList`, obj);
                this.differenceList = res.data.data.map(e => {
                    return {
                        key: e.code,
                        value: e.name,
                        type: e.type
                    };
                });
                // this.differenceList.push({
                //     key: "custom",
                //     value: "自定义"
                // });
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        },
        /** 提交处理 **/
        submitFun(data) {
            try {
                let codes = [];
                if (this.$route.query.abnormalType == 3) {
                    // codes = this.formBankBillData.map(e => e.bankOrderId);
                    codes.push(this.formBankBillData[0].bankOrderId);
                } else {
                    codes = this.formBillResuleData.map(e => e.subOrderId);
                }
                // let errorType
                // if (data.error_type == 3) {
                //     errorType = '1';
                // } else {
                //     errorType = '0';
                // }
                let obj = {
                    codes: codes,
                    errorRemark: data.errorRemark,
                    error_type: data.error_type,
                    error_code: data.error_code
                }
                Modal.confirm({
                    render: (h, params) => {
                        return h("div", [
                            h("div",{},"提交后不可更改差异原因和备注，是否确认提交?")
                        ]);
                    },
                    onOk: async () => {
                        await this.$store.dispatch(`${namespace}/postAbnormaRemark`, obj);
                        this.$Message.success({
                            content: "处理成功！"
                        });
                        setTimeout(() => {
                            this.$router.push({
                                path: '/settlement/admin/SettlementCenter/clearingAbnormal'
                            });
                        }, 1000);
                    }
                });
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        }
    },
    computed: {
        loading: function() {
            let result = this.$store.state[namespace].loading;
            return result;
        }
    }
};
</script>

<style></style>
<style lang="less">
.orderDetele {
    .title {
        border-bottom: 1px solid #999;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    .orderList {
        color: blue;
        cursor: pointer;
    }
    .childerList {
        border-top: 1px solid #999;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-top: 10px;
    }
    .ivu-form-item {
        margin-bottom: 10px;
    }
    .textColorGray,
    .textColorGray .ivu-form-item-label {
        color: #a3a3a3;
    }
    .tableBox{
         margin: 20px, 0;
    }
}
</style>
